<template>
  <el-menu default-active="2" class="el-scrollbar" @open="handleOpen" @close="handleClose" @select="handleTarget" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse">
    <template v-for="(item,index) in menus">
      <div v-if="dataLength(item.children) > 0">
        <el-submenu :index="item.rule_name" v-if="item.rule_status == 1 ? true : false">
          <template slot="title">
              <i :class="item.icon"></i>
              {{item.rule_title}}
          </template>
            <el-menu-item  v-for="(cont,k) in item.children" :key="k" :index="`${item.rule_name}-${cont.rule_name}`" v-if="cont.rule_status == 1 ? true : false"><i :class="cont.icon"></i>{{cont.rule_title}}</el-menu-item>
        </el-submenu>
      </div>
      <div v-else>
          <el-menu-item :index="item.rule_name" v-if="item.rule_status == 1 ? true : false">
              <i :class="item.icon"></i>
              {{item.rule_title}}         
          </el-menu-item>
      </div>
    </template>
  </el-menu>
</template>
<script type="text/javascript">

import { get_menu_count } from  '@/api/menu'
export default {
  props: {
    value: [Array, Object]
  },
  data() {
    return {
      isCollapse: false,

      menus:[{
      
      }],
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    var arr = [];
    get_menu_count().then(response => {
      if(response){
        response.forEach(item => {
          if(!item.parents){
            item['children'] = [];
            arr.push(item);
          }
        })
        arr.forEach(item => {
          response.forEach(cont => {
            if(item._id == cont.parents){
              item.children.push(cont);
            }
          })
        })
      }

      this.menus = arr.reverse();
      // console.log('response',response);
    })
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    /**
     * 返回数组长度
     * @param  {[type]} data [description]
     * @return {[type]}      [description]
     */
    dataLength(data){
      if(Array.isArray(data)){
        return data.length
      }
    },

    handleTarget(index,path){
      // console.log(index);
      this.$router.push({name:index})
    },


    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    }
  }
}

</script>
<style type="text/css" lang="scss">
.el-menu {
  border-right: solid 0 #e6e6e6;
}

.el-scrollbar:not(.el-menu--collapse) {
  width: 210px;
  min-height: 400px;
}

</style>
